<template>
  <div class="report-container">
    <div style="margin-bottom: 20px; float: left">
      <a-button @click="submit" type="primary">提交报表</a-button>
      <a-button @click="addRow" style="margin-left: 20px">添加行</a-button>
    </div>
    <table border="1">
      <thead>
        <tr>
          <th rowspan="3" style="width: 100px">序号</th>
          <th rowspan="3" style="width: 100px">姓名</th>
          <th colspan="13">夜餐及公杂费</th>
          <th style="width: 100px">通讯费</th>
          <th rowspan="3" style="width: 100px">领取金额</th>
          <th rowspan="3" style="width: 100px">备注</th>
        </tr>
        <tr>
          <th colspan="6">办案人员</th>
          <th colspan="6">辅助办案人员</th>
          <th rowspan="2" style="width: 60px">合计</th>
          <th rowspan="2" style="width: 60px">标准/月</th>
        </tr>
        <tr>
          <th style="width: 150px">办案人员工作日标准</th>
          <th style="width: 60px">天数</th>
          <th style="width: 60px">小计</th>
          <th style="width: 150px">办案人员 公休日节假日标准</th>
          <th style="width: 60px">天数</th>
          <th style="width: 60px">小计</th>
          <th style="width: 150px">辅助办案人员工作日标准</th>
          <th style="width: 60px">天数</th>
          <th style="width: 60px">小计</th>
          <th style="width: 150px">辅助办案人员 公休日节假日标准</th>
          <th style="width: 60px">天数</th>
          <th style="width: 60px">小计</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
            <td :key="index" v-for="(item, index) in dataSource">
              <template v-if="index == 0">
                {{ index + 1 }}
              </template>
              <template v-else>
                <input
                  @change="
                    (e) => {
                      inputChange(e, index, item);
                    }
                  "
                  style="border: 0; width: 100%"
                  :value="item.value"
                />
              </template>
            </td>
          </tr> -->
        <tr v-for="(row, rowIndex) in dataSource" :key="rowIndex">
          <td v-for="(item, itemIndex) in row" :key="itemIndex">
            <template v-if="itemIndex === 0">
              {{ rowIndex + 1 }}
            </template>
            <template v-else>
              <input
                @change="(e) => inputChange(e, rowIndex, itemIndex, item)"
                style="border: 0; width: 100%"
                :value="item.value"
              />
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'report',
  components: {},
  data() {
    return {
      dataSource: [
        [
          {
            name: 'index',
          },
          {
            name: 'detailName',
            value: '',
          },
          {
            name: 'caseHandlersWorkingStandards',
            value: '',
          },
          {
            name: 'caseHandlersWorkingStandardsDays',
            value: '',
          },
          {
            name: 'subtotal1',
            value: '',
          },
          {
            name: 'caseHandlersHolidays',
            value: '',
          },
          {
            name: 'caseHandlersHolidaysDays',
            value: '',
          },
          {
            name: 'subtotal2',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersWorkingStandards',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersWorkingStandardsDays',
            value: '',
          },
          {
            name: 'subtotal3',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersHolidays',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersHolidaysDays',
            value: '',
          },
          {
            name: 'subtotal4',
            value: '',
          },
          {
            name: 'total',
            value: '',
          },
          {
            name: 'communicationExpenses',
            value: '',
          },
          {
            name: 'claimAmount',
            value: '',
          },
          {
            name: 'remake',
            value: '',
          },
        ],
        [
          {
            name: 'index',
          },
          {
            name: 'detailName',
            value: '',
          },
          {
            name: 'caseHandlersWorkingStandards',
            value: '',
          },
          {
            name: 'caseHandlersWorkingStandardsDays',
            value: '',
          },
          {
            name: 'subtotal1',
            value: '',
          },
          {
            name: 'caseHandlersHolidays',
            value: '',
          },
          {
            name: 'caseHandlersHolidaysDays',
            value: '',
          },
          {
            name: 'subtotal2',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersWorkingStandards',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersWorkingStandardsDays',
            value: '',
          },
          {
            name: 'subtotal3',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersHolidays',
            value: '',
          },
          {
            name: 'auxiliaryCaseHandlersHolidaysDays',
            value: '',
          },
          {
            name: 'subtotal4',
            value: '',
          },
          {
            name: 'total',
            value: '',
          },
          {
            name: 'communicationExpenses',
            value: '',
          },
          {
            name: 'claimAmount',
            value: '',
          },
          {
            name: 'remake',
            value: '',
          },
        ],
      ],
    };
  },
  computed: {},
  methods: {
    inputChange(e, rowIndex, itemIndex, item) {
      this.dataSource[rowIndex][itemIndex].value = e.target.value;

      let subtotal1Item = this.dataSource[rowIndex].find(
        (item) => item.name === 'subtotal1'
      );

      let subtotal2Item = this.dataSource[rowIndex].find(
        (item) => item.name === 'subtotal2'
      );
      let subtotal3Item = this.dataSource[rowIndex].find(
        (item) => item.name === 'subtotal3'
      );
      let subtotal4Item = this.dataSource[rowIndex].find(
        (item) => item.name === 'subtotal4'
      );

      let caseHandlersWorkingStandardsItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'caseHandlersWorkingStandards'
      );
      let caseHandlersWorkingStandardsDaysItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'caseHandlersWorkingStandardsDays'
      );
      subtotal1Item.value =
        (parseInt(caseHandlersWorkingStandardsItem.value) || 0) *
        (parseInt(caseHandlersWorkingStandardsDaysItem.value) || 0);

      let caseHandlersHolidaysItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'caseHandlersHolidays'
      );
      let caseHandlersHolidaysDaysItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'caseHandlersHolidaysDays'
      );
      subtotal2Item.value =
        (parseInt(caseHandlersHolidaysItem.value) || 0) *
        (parseInt(caseHandlersHolidaysDaysItem.value) || 0);

      let auxiliaryCaseHandlersWorkingStandardsItem = this.dataSource[
        rowIndex
      ].find((item) => item.name === 'auxiliaryCaseHandlersWorkingStandards');
      let auxiliaryCaseHandlersWorkingStandardsDaysItem = this.dataSource[
        rowIndex
      ].find(
        (item) => item.name === 'auxiliaryCaseHandlersWorkingStandardsDays'
      );
      subtotal3Item.value =
        (parseInt(auxiliaryCaseHandlersWorkingStandardsItem.value) || 0) *
        (parseInt(auxiliaryCaseHandlersWorkingStandardsDaysItem.value) || 0);

      let auxiliaryCaseHandlersHolidaysItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'auxiliaryCaseHandlersHolidays'
      );
      let auxiliaryCaseHandlersHolidaysDaysItem = this.dataSource[
        rowIndex
      ].find((item) => item.name === 'auxiliaryCaseHandlersHolidaysDays');
      subtotal4Item.value =
        (parseInt(auxiliaryCaseHandlersHolidaysItem.value) || 0) *
        (parseInt(auxiliaryCaseHandlersHolidaysDaysItem.value) || 0);

      let totalItem = this.dataSource[rowIndex].find(
        (item) => item.name === 'total'
      );
      totalItem.value =
        subtotal1Item.value +
        subtotal2Item.value +
        subtotal3Item.value +
        subtotal4Item.value;

      let claimAmount = this.dataSource[rowIndex].find(
        (item) => item.name === 'claimAmount'
      );
      let communicationExpenses = this.dataSource[rowIndex].find(
        (item) => item.name === 'communicationExpenses'
      );
      claimAmount.value =
        (parseInt(communicationExpenses.value) || 0) +
        (parseInt(totalItem.value) || 0);
    },
    submit() {
      console.log(this.dataSource);
    },
    addRow() {
      this.dataSource.push([
        {
          name: 'index',
        },
        {
          name: 'detailName',
          value: '',
        },
        {
          name: 'caseHandlersWorkingStandards',
          value: '',
        },
        {
          name: 'caseHandlersWorkingStandardsDays',
          value: '',
        },
        {
          name: 'subtotal1',
          value: '',
        },
        {
          name: 'caseHandlersHolidays',
          value: '',
        },
        {
          name: 'caseHandlersHolidaysDays',
          value: '',
        },
        {
          name: 'subtotal2',
          value: '',
        },
        {
          name: 'auxiliaryCaseHandlersWorkingStandards',
          value: '',
        },
        {
          name: 'auxiliaryCaseHandlersWorkingStandardsDays',
          value: '',
        },
        {
          name: 'subtotal3',
          value: '',
        },
        {
          name: 'auxiliaryCaseHandlersHolidays',
          value: '',
        },
        {
          name: 'auxiliaryCaseHandlersHolidaysDays',
          value: '',
        },
        {
          name: 'subtotal4',
          value: '',
        },
        {
          name: 'total',
          value: '',
        },
        {
          name: 'communicationExpenses',
          value: '',
        },
        {
          name: 'claimAmount',
          value: '',
        },
        {
          name: 'remake',
          value: '',
        },
      ]);
    },
  },
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

th:first-child {
  width: 50px;
}

td:first-child {
  text-align: left;
}
</style>
